<template>
	<!-- pages/chat/chat.wxml -->
	<!-- <web-view src="{{url}}"></web-view> -->
	<view class="container">
		<!--  -->
		<view :class="'coversation ' + (pdbot ? 'pdbot' : '')" id="j_page">
			<template v-for="(item, index) in loadingList.data">
				<view class="date_box_b">
					<view class="date_box">{{ item.time }}</view>
				</view>

				<template v-for="(item2, index1) in item.data">
					<view v-if="item2.send_user_id==receive_user_id" class="kefu_box clearfix">
						<view class="kefu_imgbox clearfix">
							<image :src="item2.senduser.avatar"></image>
						</view>

						<view v-if="item2.chat_type == 1" class="kefu_dialog clearfix">
							<template v-for="(item3, index2) in item2.content_text">
								<template v-if="item3.type == 1">
									<text style="white-space: pre-wrap">{{ item3.value }}</text>
								</template>

								<template v-else>
									<image class="emoji" :src="item3.value"></image>
								</template>
							</template>
						</view>
						<view v-else-if="item2.chat_type == 2" class="kefu_dialog clearfix" style="padding: 0">
							<image class="file_pics" @tap="previewImg" :data-url="item2.content_text" :lazy-load="true"
								:src="item2.content_text"></image>
						</view>
						<view v-else-if="item2.chat_type == 3" class="kefu_dialog clearfix" style="background: #fff;max-width: 590rpx;width: 590rpx;">
							<navigator class="houseitem df"
								:url="'/pages/house/building_detail/building_detail?id=' + item2.content_text.id">
								<view class="houseimgbox">
									<image :src="item2.content_text.image_text" class="houseimg" mode="aspectFill">
									</image>
									<view v-if="item2.content_text.house_tag_ids_text1" class="label_box">
										{{ item2.content_text.house_tag_ids_text1 }}
									</view>
								</view>
								<view class="flex-grow-1">
									<view class="flex-box" style="padding-bottom: 10rpx">
										<view class="flex-box flex-grow-1">
											<view class="housename m-ellipsis">{{ item2.content_text.name }}</view>
										</view>
									</view>
									<view class="area-size">
										<text>
											{{ item2.content_text.region }}{{ item2.content_text.alias_name ? item2.content_text.alias_name : '' }}|建面{{ item2.content_text.min_space }}㎡-{{item2.content_text.max_space}}㎡
										</text>
									</view>
									<view v-if="item2.content_text.house_tag_ids_text_arr2" class="targetbox">
										<view class="targetitem"
											v-for="(targets, index2) in item2.content_text.house_tag_ids_text_arr2"
											:key="index2">
											{{ targets }}
										</view>
									</view>
									<view class="housecost">
										<text>{{ item2.content_text.min_total_price }}万起</text>
										{{ item2.content_text.first_price_msg ? item2.content_text.first_price_msg : '' }}
									</view>
								</view>
							</navigator>
						</view>

						<view v-else-if="item2.chat_type == 4" class="user_dialog clearfix"
							style="background: #fff;max-width: 590rpx;width: 590rpx;">
							<navigator class="houseitem df"
								:url="'/pages/rental/renting/renting?id=' + item2.content_text.id">
								<view class="houseimgbox">
									<image :src="item2.content_text.image_text" class="houseimg" mode="aspectFill">
									</image>
								</view>
								<view class="flex-grow-1">
									<view class="flex-box" style="padding-bottom: 10rpx">
										<view class="flex-box flex-grow-1">
											<view class="housename m-ellipsis">{{ item2.content_text.name }}</view>
										</view>
									</view>
									<view class="area-size">
										<text>{{ item2.content_text.city }} {{ item2.content_text.region }} |{{ item2.content_text.space }}㎡
										</text>
									</view>
									<view class="targetbox">
										<view class="targetitem"
											v-for="(targets, index2) in item2.content_text.house_type_id_text"
											:key="index2">
											{{ targets }}
										</view>
									</view>
									<view class="housecost">
										<text style="display: block">{{ item2.content_text.price }}</text>
									</view>
								</view>
							</navigator>
						</view>

					</view>

					<view v-else class="user_box clearfix">
						<view class="user_imgbox clearfix">
							<image :src="item2.senduser.avatar"></image>
						</view>
						<view v-if="item2.chat_type == 1" class="user_dialog clearfix">
							<template v-for="(item3, index2) in item2.content_text">
								<template v-if="item3.type == 1">
									<text style="white-space: pre-wrap">{{ item3.value }}</text>
								</template>

								<template v-else>
									<image class="emoji" :src="item3.value"></image>
								</template>
							</template>
						</view>
						<view v-else-if="item2.chat_type == 2" class="user_dialog clearfix" style="padding: 0">
							<image class="file_pics" @tap="previewImg" :data-url="item2.content_text" :lazy-load="true"
								:src="item2.content_text"></image>
						</view>
						<view v-else-if="item2.chat_type == 3" class="user_dialog clearfix" style="background: #fff;max-width: 590rpx;width: 590rpx;">
							<navigator class="houseitem df"
								:url="'/pages/house/building_detail/building_detail?id=' + item2.content_text.id">
								<view class="houseimgbox">
									<image :src="item2.content_text.image_text" class="houseimg" mode="aspectFill">
									</image>
									<view v-if="item2.content_text.house_tag_ids_text1" class="label_box">
										{{ item2.content_text.house_tag_ids_text1 }}</view>
								</view>
								<view class="flex-grow-1">
									<view class="flex-box" style="padding-bottom: 10rpx">
										<view class="flex-box flex-grow-1">
											<view class="housename m-ellipsis">{{ item2.content_text.name }}</view>
										</view>
									</view>
									<view class="area-size">
										<text>{{ item2.content_text.region }}{{ item2.content_text.alias_name ? item2.content_text.alias_name : '' }} | 建面{{ item2.content_text.min_space }}㎡-{{item2.content_text.max_space}}㎡
										</text>
									</view>
									<view class="targetbox">
										<view class="targetitem"
											v-for="(targets, index2) in item2.content_text.house_tag_ids_text_arr2"
											:key="index2">
											{{ targets }}
										</view>
									</view>
									<view class="housecost">
										<text style="display: block">{{ item2.content_text.min_total_price }}万起</text>
										{{ item2.content_text.first_price_msg ? item2.content_text.first_price_msg : '' }}
									</view>
								</view>
							</navigator>
						</view>

						<view v-else-if="item2.chat_type == 4" class="user_dialog clearfix"
							style="background: #fff;max-width: 590rpx;width: 590rpx;">
							<navigator class="houseitem df"
								:url="'/pages/rental/renting/renting?id=' + item2.content_text.id">
								<view class="houseimgbox">
									<image :src="item2.content_text.image_text" class="houseimg" mode="aspectFill">
									</image>
								</view>
								<view class="flex-grow-1">
									<view class="flex-box" style="padding-bottom: 10rpx">
										<view class="flex-box flex-grow-1">
											<view class="housename m-ellipsis">{{ item2.content_text.name }} 111111
											</view>
										</view>
									</view>
									<view class="area-size">
										<text>{{ item2.content_text.city }} {{ item2.content_text.region }} |{{ item2.content_text.space }}㎡
										</text>
									</view>
									<view class="targetbox">
										<view class="targetitem"
											v-for="(targets, index2) in item2.content_text.house_type_id_text"
											:key="index2">
											{{ targets }}
										</view>
									</view>
									<view class="housecost">
										<text style="display: block">{{ item2.content_text.price }}</text>
									</view>
								</view>
							</navigator>
						</view>

					</view>
				</template>
			</template>
		</view>

		<view class="bottom">
			<view class="shuru_box">
				<view class="changyong" @tap="showchangyongFun">常用语</view>
				<view class="input_box df ac jc">
					<!-- <input placeholder-class="placeholder" placeholder="请输入"></input> -->
					<textarea style="width: 100%; height: 64rpx; line-height: 64rpx" placeholder-class="placeholder"
						placeholder="请输入" maxlength="500" @blur="changeCursor" @input="messageFuc"
						:value="message"></textarea>
				</view>
				<button @tap="showemotionsFuc" hover-class="none">
					<image src="/static/icon/icon-7.png" class="icon_add"></image>
				</button>
				<button v-if="message.length == 0" hover-class="none" @tap="upload">
					<image src="/static/icon/icon-6.png" class="icon_send"></image>
				</button>
				<view v-if="message.length != 0" class="changyong" @tap="sendMessage">发送</view>
			</view>
			<view class="changyonglist" v-if="showchangyong">
				<view @tap="sendChangyongyu" :data-msg="item.name" class="changyongitem"
					v-for="(item, index) in words_arr">{{ item.name }}</view>
			</view>
			<view class="emotionslist df flexwa" v-if="showemotions">
				<image class="emotion" @tap="sendEmotion" :data-msg="item.name" :src="item.image"
					v-for="(item, index) in emotion_json"></image>
			</view>
		</view>
	</view>
</template>

<script>
	// pages/chat/chat.js
	const app = getApp();
	const functions = require('../../../utils/functions.js');

	export default {
		data() {
			return {
				receive_user_id: 0,
				session_id: 0,
				// record_list: [],
				// page: 1,
				// next_page: 1,
				emotion_json: [],
				words_arr: [],

				// url:'',
				showchangyong: false,

				showemotions: false,
				pdbot: false,

				// //底部padding
				// left_user: null,

				// right_user: null,
				all_img_arr: [],
				message: '',
				now_cursor: 0,
				is_init: false,
				scroll_timer: null,
				// tmp_msg: null,
				// tmp_msg_arr: [],
				// targets: [],

				loadingList: {
					total: 0,
					current_page: 0,
					last_page: 1,
					data: []
				},
			};
		},
		onLoad: function(options) {
			var that = this;
			var receive_user_id = options.receive_user_id || 1;
			var session_id = options.session_id || 0;
			// 获取聊天列表
			this.receive_user_id = receive_user_id;
			this.session_id = session_id;
			this.emotion_json = app.globalData.chat_config.ortherdata.chat_memes;
			this.words_arr = app.globalData.chat_config.ortherdata.chat_words;
			app.get_msg_list(session_id, receive_user_id, 1);


			if (options.house_id && options.house_id > 0) {
				let house_type = options.house_type || 'building';
				app.sendMessage(receive_user_id, this.session_id, options.house_id, house_type == 'building' ? 3 : 4);
			}
		},
		onShow: function() {
			var that = this;
			uni.$on('msg_list_callback', function(data) {
				console.log(data, 'chat')
				that.msg_list(data);
			})
			uni.$on('new_msg_callback', function(data) {
				that.new_msg(data);
			})
		},
		onUnload: function() {
			uni.$off('new_msg_callback')
			uni.$off('msg_list_callback')
		},
		onHide: function() {
			uni.$off('new_msg_callback')
			uni.$off('msg_list_callback')
		},
		onReady: function() {
			var that = this;

			if (!this.is_init) {
				var scroll_timer = setInterval(function() {
					that.pageScrollToBottom();
					that.is_init = true
					clearInterval(that.scroll_timer);
				}, 500);

				that.scroll_timer = scroll_timer;
			}
		},
		onPageScroll: function(res) {
			if (res.scrollTop == 0 && this.loadingList.current_page < this.loadingList.last_page && this.loadingList
				.current_page != 0) {
				app.get_msg_list(this.session_id, this.receive_user_id, this.loadingList.current_page + 1);
			}
		},
		onReachBottom: function() {
			clearInterval(this.scroll_timer);
		},
		methods: {
			showchangyongFun() {
				console.log('showchangyongFun');
				this.showchangyong = !this.showchangyong;
				this.showemotions = false;

				if (this.showchangyong || this.showemotions) {
					this.pdbot = true;
				} else {
					this.pdbot = false;
				}
			},

			showemotionsFuc() {
				this.showemotions = !this.showemotions;
				this.showchangyong = false;
				this.pdbot = true;
				if (this.showchangyong || this.showemotions) {
					this.pdbot = true;
				} else {
					this.pdbot = false;
				}
			},

			// 发送消息
			sendMessage() {
				var that = this;
				app.sendMessage(this.receive_user_id, this.session_id, this.message, 1);
				this.message = '';
			},

			// 上传图片
			upload() {
				var that = this;
				functions.chooseImg(9, function(res) {
					app.sendMessage(that.receive_user_id, that.session_id, res.url, 2);
				});
			},

			// 图片预览
			previewImg(e) {
				uni.previewImage({
					current: e.currentTarget.dataset.url,
					// 当前显示图片的http链接
					urls: this.all_img_arr // 需要预览的图片http链接列表
				});
			},

			changeCursor(e) {
				this.now_cursor = e.detail.cursor;
			},

			messageFuc(e) {
				//console.log(e);
				this.now_cursor = e.detail.cursor;
				this.message = e.detail.value;
			},

			sendEmotion(e) {
				var text = e.currentTarget.dataset.msg;
				var now_cursor = this.now_cursor;
				var message = insertStr(this.message, now_cursor, text);
				now_cursor = Number(now_cursor) + Number(text.length);
				this.now_cursor = now_cursor;
				this.message = message;
			},

			sendChangyongyu(e) {
				var msg = e.currentTarget.dataset.msg;
				app.sendMessage(this.receive_user_id, this.session_id, msg, 1);
			},

			changeEmotion: function(contents) {
				var emotions = this.emotion_json;
				var pattern1 = /\[[\u4e00-\u9fa5]+\]/g;
				var pattern2 = /\[[\u4e00-\u9fa5]+\]/;

				if (contents) {
					contents = contents.replace(new RegExp(/\<br>/, 'g'), '\n');
					contents = contents.replace(new RegExp(/\<br\/>/, 'g'), '\n');
				}

				var content = contents.match(pattern1);
				var web_url = app.globalData.web_url;
				var str = contents;
				var now_str = contents; // console.log(content);

				var arr = [];

				if (content == null) {
					return [{
						type: 1,
						value: str
					}];
				}

				for (var i = 0; i < content.length; i++) {
					var src = '';

					for (var j = 0; j < emotions.length; j++) {
						if (emotions[j].text == content[i]) {
							// src = "<image style='height:20rpx;width:20rpx' class='aui-inline' src='"+web_url+"/assets/addons/fastchat/emotion/"+emotions[j].name+".png'></image>";
							src = web_url + '/assets/addons/fastchat/emotion/' + emotions[j].name +
								'/static/pages/chat/chat/.png';
							break;
						}
					}

					if (!now_str) {
						break;
					} // var tmp_arr = now_str.split(content[i]);
					// tmp_arr.forEach(element => {

					var has_i = now_str.indexOf(content[i]);

					if (has_i != -1) {
						arr.push({
							type: 1,
							value: now_str.substring(0, Number(has_i))
						});
						arr.push({
							type: 2,
							value: src
						});
						now_str = now_str.substring(Number(has_i) + Number(content[i].length));

						if (i == content.length - 1) {
							arr.push({
								type: 1,
								value: now_str
							});
						}
					} // })
					// str = str.replace(pattern2, src);
				}

				return arr;
			},

			// 获取聊天列表
			msg_list(res) {
				console.log(res.data.data);
				var loadingList = res.data;
				if (this.loadingList.current_page > 1) {
					var now_loadingList_data = this.loadingList.data || [];
					var now_loadingList_data = now_loadingList_data.concat(loadingList.data);
					loadingList.data = now_loadingList_data;
				}
				var all_img_arr = this.all_img_arr || [];
				all_img_arr = all_img_arr.concat(res.images_arr);
				this.loadingList = loadingList;
				this.all_img_arr = all_img_arr;
				this.receive_user_id = res.receive_user ? res.receive_user.id : 0;
				app.ws_send({
					type: 'setread',
					session_id: this.session_id,
					receive_user_id: this.receive_user_id
				});
			},
			// 新消息
			new_msg(data) {
				if (data.receive_user_id != this.receive_user_id && data.send_user_id != this.receive_user_id) {
					return false;
				}
				var loadingList = this.loadingList;
				var now_loadingList_data = loadingList.data || [];
				var ret = app.handle_msg_data(data);
				var now_loadingList_data = now_loadingList_data.concat(ret.data);
				loadingList.data = now_loadingList_data;
				var all_img_arr = this.all_img_arr || [];
				all_img_arr = all_img_arr.concat(ret.images_arr);
				this.loadingList = loadingList;
				this.all_img_arr = all_img_arr;
				this.pageScrollToBottom();
				if (data.send_user_id == this.receive_user_id) {
					app.ws_send({
						type: 'setread',
						session_id: this.session_id,
						receive_user_id: this.receive_user_id
					});
				}
			},
			// 获取容器高度，使页面滚动到容器底部--------------------有问题
			pageScrollToBottom: function() {
				uni.createSelectorQuery().select('#j_page').boundingClientRect(function(rect) {
					// 使页面滚动到底部
					// console.log(rect.height)
					uni.pageScrollTo({
						scrollTop: rect.height
					})
				}).exec()
			}
		}
	}; //插入
	//为字符串插入字符 其中soure为原字符串,start为将要插入字符的位置，newStr为要插入的字符

	function insertStr(soure, start, newStr) {
		return soure.slice(0, start) + newStr + soure.slice(start);
	}
</script>
<style>
	/* pages/chat/chat.wxss */
	.df {
		display: flex;
		display: -webkit-flex;
	}

	.flexwa {
		flex-wrap: wrap;
	}

	.container {
		background-color: #f6f7fa;
	}

	.coversation {
		padding: 30rpx 30rpx 120rpx;
	}

	.coversation.pdbot {
		padding: 220rpx 30rpx 420rpx;
	}

	.kefu_imgbox {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 20rpx;
		float: left;
	}

	.kefu_imgbox image {
		width: 80rpx;
		height: 80rpx;
	}

	.kefu_dialog {
		background-color: rgb(255, 255, 255);
		border-radius: 0 20rpx 20rpx 20rpx;
		padding: 20rpx 30rpx;
		float: left;
		position: relative;
		font-size: 28rpx;
		max-width: 500rpx;
		font-size: 28rpx;
		word-break: break-all;
		overflow: hidden;
	}

	.commen_problem {
		color: #8cc2e6;
		text-decoration: underline;
		padding-top: 20rpx;
		font-size: 26rpx;
	}

	.user_imgbox {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-left: 20rpx;
		float: right;
	}

	.user_imgbox image {
		width: 80rpx;
		height: 80rpx;
	}

	.user_dialog {
		background-color: #0091ff;
		border-radius: 20rpx 0 20rpx 20rpx;
		padding: 20rpx 30rpx;
		float: right;
		position: relative;
		font-size: 28rpx;
		color: #fff;
		max-width: 500rpx;
		word-break: break-all;
		display: flex;
		overflow: hidden;
	}

	.clearfix:after {
		content: '';
		display: block;
		clear: both;
	}

	.kefu_box {
		margin-top: 60rpx;
	}

	.user_box {
		margin-top: 60rpx;
	}

	.shuru_box {
		min-height: 100rpx;
		border-top: 1px solid #e6e6e6;
		left: 0;
		right: 0;
		display: flex;
		padding: 0 30rpx;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
	}

	.icon_add {
		width: 40rpx;
		height: 40rpx;
		margin: 0 25rpx;
	}

	.icon_send {
		width: 41rpx;
		height: 32rpx;
	}

	button {
		width: auto !important;
		padding: 0 !important;
		margin: 0 !important;
		line-height: inherit !important;
		display: flex;
		align-items: center;
	}

	.input_box {
		padding: 0 20rpx;
		background: #f7f7f7;
		height: 64rpx;
		flex: 1;
	}

	.input_box input {
		background: #f7f7f7;
		line-height: 64rpx;
		height: 64rpx;
		font-size: 28rpx;
	}

	.placeholder {
		color: #bfbfbf;
		font-size: 28rpx;
	}

	.date_box_b {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 20rpx 0 0;
	}

	.date_box {
		padding: 9rpx 17rpx;
		border-radius: 50rpx;
		background: #f5f5f5;
		font-size: 22rpx;
		color: #333;
		display: inline-block;
		margin: 0 auto;
	}

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}

	@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
		.bottom {
			padding-bottom: 34px;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
		}
	}

	.changyong {
		width: 116rpx;
		height: 68rpx;
		background: #0091ff;
		border-radius: 8rpx;
		line-height: 68rpx;
		text-align: center;
		color: #fff;
		font-size: 28rpx;
		margin-right: 20rpx;
	}

	.changyonglist {
		max-height: 300rpx;
		overflow-y: scroll;
		background-color: #fff;
	}

	.changyongitem {
		overflow: hidden;
		border-bottom: 1px solid #f5f5f5;
		padding: 30rpx;
		color: #333;
	}

	.emotionslist {
		max-height: 300rpx;
		overflow-y: scroll;
		background-color: #fff;
	}

	.emotionsitem {
		overflow: hidden;
		border-bottom: 1px solid #f5f5f5;
		padding: 30rpx;
		color: #333;
	}

	.houseitem {
		background-color: #fff;
		width: 100%;
	}

	/* .houseitem{padding:30rpx 40rpx ;background-color: #fff;position: fixed;top: 0;left: 0;right: 0;z-index: 20;} */
	.houseitem .houseimg {
		width: 240rpx;
		height: 190rpx;
		border-radius: 10rpx;
	}

	.housename {
		font-size: 30rpx;
		color: #000;
	}

	.area-size {
		font-size: 18rpx;
		color: #898989;
	}

	.area-size text {
		display: block;
		font-size: 20rpx;
	}

	.targetbox {
		padding: 14rpx 0 0;
		white-space: nowrap;
		overflow-x: scroll;
	}

	.targetitem {
		display: inline-block;
		padding: 2rpx 4rpx;
		background: #cce9ff;
		font-size: 18rpx;
		color: #0091ff;
		border-radius: 2rpx;
		margin-right: 10rpx;
		margin-bottom: 12rpx;
	}

	.housecost {
		color: #f8532f;
		font-size: 24rpx;
		font-weight: bold;
		lighting-color: 28rpx;
	}

	.housecost text {
		font-size: 34rpx;
		margin-right: 10rpx;
	}

	.event {
		padding-top: 11rpx;
		font-size: 18px;
		color: #898989;
	}

	.event .bao {
		width: 26rpx;
		text-align: center;
		line-height: 26rpx;
		font-size: 18rpx;
		height: 26rpx;
		border-radius: 5rpx;
		background: linear-gradient(180deg, #00c4ff, #0091ff);
		color: #fff;
		margin-right: 10rpx;
	}

	.event .dong {
		width: 26rpx;
		text-align: center;
		line-height: 26rpx;
		font-size: 18rpx;
		height: 26rpx;
		border-radius: 5rpx;
		background: linear-gradient(270deg, #ff6635, #ffb45c);
		color: #fff;
		margin-right: 10rpx;
	}

	.event .hot {
		width: 26rpx;
		text-align: center;
		line-height: 26rpx;
		font-size: 18rpx;
		height: 26rpx;
		border-radius: 5rpx;
		background: linear-gradient(270deg, #ff5232 0%, #ff6635 100%);
		color: #fff;
		margin-right: 10rpx;
	}

	.houseimgbox {
		margin-right: 15rpx;
		width: 240rpx;
		height: 190rpx;
		position: relative;
	}

	.houseimgbox .label_box {
		position: absolute;
		top: 15rpx;
		left: 15rpx;
		z-index: 3;
		padding: 0 5rpx;
		background-color: #ff7b40;
		color: #fff;
		font-size: 22rpx;
		height: 30rpx;
		line-height: 30rpx;
		border-radius: 5rpx;
	}

	.typebox {
		height: 25rpx;
		line-height: 25rpx;
		padding: 0 5rpx;
		color: #c6c6c6;
		border: 1px solid #c6c6c6;
		font-size: 20rpx;
		border-radius: 5rpx;
		margin-left: 10rpx;
	}

	.icon_collect {
		width: 26rpx;
		height: 25rpx;
	}

	.salerank {
		max-width: 400rpx;
		height: 30rpx;
		margin-bottom: 10rpx;
		line-height: 30rpx;
		font-size: 18rpx;
		color: #fff;
		display: inline-block;
		padding-right: 5rpx;
		border-radius: 5rpx;
		background: linear-gradient(180deg, #f0dec0 0%, #dcba8c 100%);
	}

	.rankimg {
		width: 16rpx;
		height: 16rpx;
		margin: 0 5rpx;
	}

	.ranks {
		font-size: 18rpx;
	}

	.collects {
		position: fixed;
		top: 0;
		right: 20rpx;
		width: 404rpx;
		height: 97rpx;
		z-index: 99;
	}

	.emoji {
		width: 40rpx;
		height: 40rpx;
	}

	.file_pics {
		max-width: 440rpx;
	}

	.emotionslist .emotion {
		width: 60rpx;
		height: 60rpx;
	}
</style>
